﻿@page
@model Sunday.Xncf.DemoTest.Areas.DemoTest.Pages.DatabaseSample
@{
    ViewData["Title"] = "数据库操作示例";
    Layout = "_Layout_Vue";
}

@section HeaderContent{
    <style>
       .extensionAreaTemplate .box {
            margin: 30px auto;
            text-align: center;
            padding: 80px;
        }
      .extensionAreaTemplate  .el-menu {
            min-height: 400px;
        }
       .extensionAreaTemplate .el-menu-item a {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        .extensionAreaTemplate .el-menu-item a i {
            margin-right: 5px;
            width: 24px;
            text-align: center;
            font-size: 18px;
            vertical-align: middle;
        }
    </style>
}

@section breadcrumbs {
    <el-breadcrumb-item>扩展模块</el-breadcrumb-item>
    <el-breadcrumb-item>周日直播测试</el-breadcrumb-item>
    <el-breadcrumb-item>数据库操作示例</el-breadcrumb-item>
}

<div class="extensionAreaTemplate">
    <el-container>
        <el-header class="module-header">
            <span class="start-title"> <i class="fa fa-dot-circle-o"></i>&nbsp;<span class="module-header-v">数据库操作示例</span></span>
        </el-header>
        <el-container v-if="moduleData">
            <el-aside width="200px">
                <el-menu background-color="#304156" default-active="2"
                         text-color="#bfcbd9" active-text-color="#409eff">
                    @(await Html.PartialAsync("_SideMenu"))
                </el-menu>
            </el-aside>
            <el-main>
                <h4>{{moduleData.xncfModuleDto.description}}</h4>
                <br />
                <h4>安装时间：{{formaTableTime(moduleData.colorDto.addTime)}}</h4>
                <h3>当前数据库类型：@Model.MultipleDatabaseType</h3>
                <div class="box" :style="{backgroundColor}">

                    <el-button @@click="changeColor('Brighten')"><i class="fa fa-tachometer"></i> 变亮</el-button>
                    <el-button @@click="changeColor('Darken')" type="info"><i class="fa fa-moon-o"></i> 变暗</el-button>
                    <el-button @@click="changeColor('Random')" type="success"><i class="fa fa-sun-o"></i> 随机</el-button>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
@section scripts{
    <script>
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    moduleData: null,
                    uid: ''
                };
            },
            computed: {
                backgroundColor() {
                    let rgba = `rgba(${this.moduleData.colorDto.red},${this.moduleData.colorDto.green},${this.moduleData.colorDto.blue},1)`
                    return rgba;
                }
            },
            mounted() {
                this.getDetail();
            },
            methods: {
                async getDetail() {
                    this.uid = resizeUrl().uid
                    const res = await service.get('/Admin/DemoTest/DatabaseSample?handler=Detail&uid=' + this.uid);
                    this.moduleData = res.data.data;
                },
                // 改变颜色
                async changeColor(param) {
                    const res = await service.get('/Admin/DemoTest/DatabaseSample?handler=' + param + '&uid=' + this.uid);
                    this.moduleData.colorDto = res.data.data;
                }
            }
        });
    </script>
}
